import React from 'react';
import { createModalContainer } from '@/components/changeModal';
import {Button, message, Form, Alert, InputNumber} from 'antd';
import { connect } from 'dva';
import styles from './index.less';
import {abs} from '@/utils/utils';
import InputPrices from '@/components/plugins/InputPrices';

const FormItem = Form.Item;
@Form.create()
class CancelOnlyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            price: props.param.RefundFee
        }
    }

    componentWillMount() {
        window.Isoption = false;
      }
      componentDidMount() {
        window.Isoption = true;
      }

    // 取消
    handleCancel =() => {
        this.props.cancel();
    }

    onPriceChange = value => {
        this.setState({
          price: value,
        });
      };

    handleSubmit = e => {
        e.preventDefault();
        const { dispatch } = this.props;
        const {price} = this.state;
        this.props.form.validateFields((err, values) => {
            if(!err) {
                dispatch({
                    type: 'orderRight/AgreeRefund',
                    payload: {
                        Id: this.props.param.Id,
                        // Fee: price
                    },
                    callBack: {
                        success: res => {
                            if(res.Code===0) {
                                message.success('提交成功');
                                this.props.ok();
                            }
                        },
                        error: res => {
                            message.error(res.Msg)
                        }
                    }
                })
            }
        })
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        const max = this.props.param.RefundFeeMax;
        const {loading1} = this.props;
        const formItemLayout = {
            labelCol: {
                span: 5,
              },
              wrapperCol: {
                span: 19,
              },
          }
        return (
            <Form onSubmit={this.handleSubmit}>
                <Alert
                    message="该笔订单通过“微信支付”付款，同意申请后，退款将自动原路退回至买家付款账户。"
                    type="warning"
                    showIcon
                    style={{margin: 24}}
                />
                <FormItem {...formItemLayout} label="处理方式">仅退款</FormItem>
                {/* <FormItem
                    {...formItemLayout}
                    label="退款金额"
                    extra={
                        <span>最多可退￥{abs(max, 2)}</span>
                    }
                >
                    {getFieldDecorator('Fee',{
                        rules: [{required: true, message: '此项为必选项'}]
                    })(
                        <InputPrices
                            min={0.01}
                            max={max}
                            onChange={this.onPriceChange}
                            style={{width: 144}}
                            setValue={this.state.price}
                      />
                    )}
                </FormItem> */}
                <FormItem
                    {...formItemLayout}
                    label="退款金额"
                >
                    ￥{abs(this.props.param.RefundFee,2)}
                </FormItem>
                <FormItem className="xkd-model-footBtn">
                    <Button
                        type="primary"
                        htmlType="submit"
                        loading={loading1}
                    >
                        同意
                    </Button>
                </FormItem>
            </Form>
        )
    }
}

const CancelOnly = createModalContainer(
    connect(({orderRight, global, loading}) =>({
    orderRight,
    loading1: loading.effects['orderRight/AgreeRefund'],
    }))(CancelOnlyComponent),
    true,
    true
);

export default CancelOnly;